<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>
  
<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "Vue2MapboxMapTemplate",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      const map = new mapboxgl.Map({
        container: "map", // container ID
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z",
        center: [118.79013542048335, 32.05775855185749],
        zoom: 3, 
        // projection: "mercator",
      });

      map.on('load', () => {
        map.addSource("earthquakes", {
          type: "geojson",
          data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
        });

        map.addLayer({
          id: "earthquakes-layer-symbol",
          type: "circle",
          source: "earthquakes",
          layout: {
            
          },
          paint: {
            'circle-color': 'red',
            'circle-radius': 10,
          }
        });


        const popup = new mapboxgl.Popup({
          closeButton: false,
          closeOnClick: false
        });

        map.on('mouseenter', 'earthquakes-layer-symbol', (e) => {
          map.getCanvas().style.cursor = 'pointer';
          popup.setLngLat(e.features[0].geometry.coordinates.slice()).setHTML(`<h1>${JSON.stringify(e.features[0].properties)}</h>`).addTo(map);
        });

        map.on('mouseleave', 'earthquakes-layer-symbol', () => {
          map.getCanvas().style.cursor = '';
          popup.remove();
        });
      })









    },
  },
};
</script>
  
<style></style>
  